<!-- 下单确认弹出 -->
<template>
  <div>
    <van-popup :value="show" position="bottom" :close-on-click-overlay="false">
      <div class="van-popup-content">
        <!-- 标题 -->
        <div class="flex items-center justify-between" style="margin-bottom: 10px;">
          <span class="text-white font-40">下单确认</span>
          <van-icon name="cross" size="20" @click="$emit('update:show', false)" />
        </div>

        <!-- 内容 -->
        <div class="flex items-center" style="gap: 5px;">
          <span class="text-white font-30">BTC/USDT</span>
          <span v-if="type === 1" class="font-20 text-green" style="background-color: #15231a;">买入</span>
          <span v-else class="font-20 text-red" style="background-color: #27171b;">卖出</span>
          <span class="font-20 text-white">2x</span>
        </div>

        <div class="list">
          <div class="item">
            <span>委托价格</span>
            <span>68,870USDT</span>
          </div>
          <div class="item">
            <span>数量</span>
            <span>68,870USDT</span>
          </div>
          <div class="item">
            <span>金额</span>
            <span>68,870USDT</span>
          </div>
          <div class="item">
            <span>类型</span>
            <span>68,870USDT</span>
          </div>

        </div>

        <!-- 仓位 -->
        <div class="space">
          <div class="space-title">仓位</div>
          <div class="grid-box">
            <div></div>
            <div class="st">下单前</div>
            <div class="st">下单后</div>
            <div class="st">仓位资产</div>
            <div>0 BTC</div>
            <div>1.2 BTC</div>
            <div class="st">负债</div>
            <div>0 USDT</div>
            <div>67,870 USDT</div>
          </div>
        </div>

        <div class="bottom">
          <van-checkbox v-model="checked" shape="square">不再提示</van-checkbox>
          <van-button size="large" round>确认</van-button>
        </div>

      </div>
    </van-popup>
  </div>
</template>

<script>
import { Popup } from "vant";

export default {
  name: 'OrderConfirm',
  components: {
    [Popup.name]: Popup,
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    type: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      checked: false
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
::v-deep .van-popup {
  // width: 92% !important;
  background: #121212 !important;
  border-radius: 40px 40px 0 0;

  .van-popup-content {
    padding: 30px;
    background: #121212;
    color: #fff;
    display: grid;
    gap: 20px;
    position: relative;
    overflow: hidden;

    .list {
      .item {
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 12px 0;

        &>span:first-child {
          color: #929292;
          font-size: 26px;
        }
      }
    }

    .space {
      .space-title {
        color: #929292;
        // font-size: 26px;
      }

      .grid-box {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 10px;
        font-size: 26px;
        background-color: #191919;
        border-radius: 20px;
        padding: 20px;
        margin-top: 10px;
        padding-right: 50px;

        &>*:nth-child(3n) {
          text-align: right;
        }

        .st {
          color: #929292;
        }
      }
    }

    .bottom {
      display: grid;
      gap: 20px;
      margin-top: 20px;

      .van-button {
        color: #000;
        font-weight: bold;
      }
    }
  }
}

::v-deep .van-checkbox__icon--checked {
  .van-icon {
    background-color: #fff !important;
      border-color: #000 !important;
      &::before{
      color: #000 !important;
    }
  }
}
</style>